<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8" />
<title>15.2 HTML Media Capture</title>
<script>
// Function to handle the HTML media capture of a file
function handleCapture(files) {
// Set the image matching pattern
var imageType = /image.*/;
// We expect only one picture at a time but loop through any files provided
for (var i = 0; i < files.length; i++) {
// Retrieve the file from those passed in
var file = files[i];
// Check if the file is an image type
if (file.type.match(imageType)) {
// Create our new image element
var newImg = document.createElement("img");
newImg.classList.add("obj");
newImg.file = file;
newImg.style.maxHeight = "100px";
newImg.style.maxWidth = "100px";
// Append the new image element to the thumbnails area
var thumbnails = document.getElementById('thumbnails');
preview.appendChild(newImg);
// Load the image element with the contents of the file
var reader = new FileReader();
reader.onload = (function(aImg) { 
return function(e) { aImg.src = e.target.result; }; 
})(newImg);
reader.readAsDataURL(file);
}
}
}
</script>
</head>
<body>
<h2>Media Capture - Camera</h2>
<input type="file" accept="image/*;capture=camera" capture="camera" onChange="handleCapture(this.files)"></input>
<div id="thumbnails"></div>
</body>
</html>